<!--
* @author wn
* @date 2022/08/10 09:58:40
* @description: 购物车页面 -- 选择规格组件 的 SKU 组件
!-->
<template>
	<div class="cart-sku" ref="target">
		<!-- 规格文本部分 -->
		<div class="attrs" @click="toggle">
			<span class="ellipsis">{{ attrs }}</span>
			<i class="iconfont icon-angle-down"></i>
		</div>
		<!-- 规格弹出层部分 -->
		<transition name="fade">
			<div v-if="isShow" class="layer">
				<template v-if="good">
					<!-- 点击购物车 sku组件 修改 规格 发送给购物车父组件 修改vuex -->
					<good-sku :goods="good" :skuId="skuId" @change="changeSku" />
					<xtx-button
						@click="submit"
						type="primary"
						size="mini"
						style="margin-left: 150px"
					>
						确认
					</xtx-button>
				</template>
				<div v-else class="loading"></div>
			</div>
		</transition>
	</div>
</template>
<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { getGoodsSku } from '@/network/cart'
import GoodSku from '@/views/goods/components/GoodSku'
export default {
	name: 'CartSku',
	components: { GoodSku },
	props: {
		attrs: {
			type: String,
			default: '',
		},
		skuId: {
			type: String,
			default: '',
		},
	},
	setup(props, { emit }) {
		// 是否展示弹层layer
		const isShow = ref(false)
		const target = ref(null)
		const good = ref(null)
		const toggle = () => {
			isShow.value ? hide() : show()
		}

		// 1 目标元素 2 点击该元素外的区域触发函数
		onClickOutside(target, () => hide())
		// 显示
		const show = async () => {
			isShow.value = true
			// 每次打开，都根据 skuId 获取最新的商品信息  skus specs
			const { result } = await getGoodsSku(props.skuId)
			good.value = result
		}
		// 隐藏
		const hide = () => {
			isShow.value = false
			// 隐藏的时候，旧的商品信息清理掉
			good.value = null
		}
		// 保存 修改后的规格数据  点击确认 发送给 购物车 修改 vuex
		let changeGood = {}
		const changeSku = good => {
			if (good.skuId) {
				changeGood = good
			}
		}
		// 修改购物车 规格 即修改vuex
		const submit = () => {
			// 修改后生成新的skuId  不是新的 不更改  弹框不消失
			if (changeGood.skuId && changeGood.skuId !== props.skuId) {
				emit('changeGood', changeGood)
				hide()
			}
		}
		return { isShow, toggle, target, good, changeSku, submit }
	},
}
</script>
<style scoped lang="less">
// layer 动画
.fade {
	&-enter-from,
	&-leave-to {
		transform: translateY(-100px) scale(1, 0);
		opacity: 0;
	}
	// ,&-leave-active
	&-enter-active {
		transition: all 0.4s 0.2s;
	}
	&-enter-to,
	&-leave-from {
		transform: none;
		opacity: 1;
	}
}
.cart-sku {
	position: relative;
	height: 28px;
	border: 1px solid #f5f5f5;
	padding: 0 6px;
	margin-top: 10px;
	.attrs {
		display: flex;
		justify-content: space-between;
		align-items: center;
		span {
			max-width: 230px;
			font-size: 14px;
			color: #999;
		}
		i {
			margin-left: 5px;
			font-size: 14px;
		}
	}
	.layer {
		position: absolute;
		left: -1px;
		top: 40px;
		z-index: 10;
		width: 400px;
		font-size: 14px;
		padding: 20px;
		background: #fff;
		border: 1px solid @xtxColor;
		border-radius: 4px;
		box-shadow: 2px 2px 4px lighten(@xtxColor, 50%);
		// 动画
		// transform: translateY(-100px) scale(1, 0);
		// opacity: 0;
		// transition: all 0.5s 0.2s;
		// &.fade {
		// 	transform: none;
		// 	opacity: 1;
		// }
		// 向上三角
		&::before {
			position: absolute;
			left: 12px;
			top: -8px;
			content: '';
			width: 12px;
			height: 12px;
			background: #fff;
			border-left: 1px solid @xtxColor;
			border-top: 1px solid @xtxColor;
			// box-shadow: -2px -2px 4px lighten(@xtxColor, 50%);
			transform: scale(0.8, 1) rotate(45deg);
		}
		.loading {
			height: 224px;
			background: url(~@/assets/images/loading.gif) no-repeat center;
		}
	}
}
</style>
